feat: screenshot automation#14722
Conversation
Adds a complete screenshot capture pipeline for the Nextcloud documentation: - cypress.config.ts: starts a clean stable33 container via @nextcloud/cypress/docker, installs docs-relevant apps (activity, calendar, contacts, talk, viewer, etc.), fully isolated from the dev environment - cypress/e2e/helpers.ts: docScreenshot() and docElementScreenshot() helpers - cypress/support/: e2e.ts and commands.ts support files - scripts/inventory.py: parses all RST image/figure directives across all three manuals, resolves paths, derives cypress_name and cypress_spec per entry, outputs screenshot-inventory.json (552 directives found, 0 missing) - scripts/sync.sh: reads inventory to copy Cypress output to correct doc image paths, runs pngquant optimisation, prints coverage report - scripts/optimize.sh: standalone pngquant batch compressor - Makefile: screenshot-install, screenshot-inventory, screenshots, screenshots-dry - .nvmrc: pin to Node 20 LTS - .gitignore: exclude node_modules, cypress/snapshots, generated inventory AI-Assisted-By: claude-sonnet-4-6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@larch.dev>
- cypress/e2e/user/files.cy.ts: 12 screenshot tests covering access_webgui.rst,
sharing.rst and quota.rst sections of the user manual
- Corrected NC33 selectors from server source inspection:
[data-cy-upload-picker] for upload menu, [data-cy-files-navigation] for nav,
[data-cy-files-list-row-actions] with button[aria-label="Actions"] for sidebar,
[data-cy-sidebar] for the details panel
- Added 'comments' to SCREENSHOT_APPS; comments integrates into Activity tab
when the activity app is enabled
- Renamed tsconfig.cypress.json → tsconfig.json (Cypress 13 requires this name)
- Refined cypress/support/{e2e,commands}.ts imports and exception handler
AI-Assisted-By: Claude Sonnet 4.6 <claude@anthropic.com>
Signed-off-by: Anna Larch <anna@nextcloud.com>
- Add scripts/mysql2sqlite.py to convert a Nextcloud MariaDB dump to a SQLite database suitable for the Cypress CI container (handles type mapping, AUTO_INCREMENT removal, COMMENT stripping, prefix index lengths, MySQL escape sequences, and INSERT OR IGNORE for constraint conflicts) - Wire seed data injection into cypress.config.ts: after startNextcloud, the setup converts ~/Downloads/tp/tp.sql (or $SEED_DATA_PATH/tp.sql) on first run, injects the SQLite into the container, creates admin:admin, re-enables required apps, and copies per-user avatars - Add suppressFocusRings() helper to strip focus outlines before every screenshot (helpers.ts) - Fix files.cy.ts: create Documents folder via WebDAV in before() hook so breadcrumb screenshot shows content; dismiss toasts before the public-link sharing screenshot; add comments app to SCREENSHOT_APPS AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Four issues prevented the seeded MariaDB dump from working in the NC 33 Cypress container: 1. **CHECK constraint on json_valid()** — MariaDB adds `CHECK (json_valid(...))` for JSON columns. SQLite 3.38+ evaluates `json_valid(NULL) = 0`, so every NC 33 INSERT into oc_share that omitted the `attributes` column failed the constraint, returning 403 "Failed to create share". Fix: strip inline CHECK constraints in mysql2sqlite.py (CHECK is always the last token on a column line). 2. **NC 34 app versions** — the seed's oc_appconfig had installed_version values for optional apps (notifications, viewer, etc.) from NC 34. NC 33 detected these as "newer than code" and entered upgrade-required mode (503). Fix: in the Python DB patch, delete all oc_appconfig entries not present in the fresh NC 33 DB; NC 33 re-populates them when enabling apps. 3. **WAL not checkpointed** — modifications to the seed SQLite cache by the Python patch remained in the WAL file. Reading only the main file gave NC 33 an incomplete DB (malformed error). Fix: run `PRAGMA wal_checkpoint(FULL)` and `PRAGMA journal_mode=DELETE` before closing the patched connection. 4. **Sidebar state restoration** — NC's Vue router restores the previously-open file sidebar between tests (testIsolation: false). When the sidebar was already open, "Details" was absent from the Actions menu. Fix: check sidebar visibility before clicking Actions and close it with Escape if needed. Also fixes `files:scan` flag (`--user` → positional argument) and adds `occ config:app:set core shareapi_allow_links yes` to force link sharing regardless of any NC 34 DB artefacts. AI-Assisted-By: claude-sonnet-4-6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
📖 Documentation PreviewNo RST documentation pages changed in this PR. Last updated: Tue, 05 May 2026 18:29:10 GMT |
…isioning Drop the MariaDB→SQLite injection pipeline entirely. Users and files are now created at test time via occ user:add (cy.task) and WebDAV PUT/MKCOL, making the setup version-agnostic and compatible with any NC release. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Upload Pexels wallpaper images and generated sample PDFs via Node.js WebDAV tasks (bypassing Cypress IPC Buffer serialisation). Adds uploadFile and mkdavCol tasks to cypress.config.ts, and a reportlab PDF generator script for repeatable fixture generation. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…MTime AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Adds a pngquant pass in the after:run hook so every screenshot is automatically compressed (70-85 quality, ~65% size reduction) without any manual step. Degrades gracefully with a warning if pngquant is not installed. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…ch run Signed-off-by: Anna Larch <anna@nextcloud.com>
The full-viewport shot of the Documents folder made the breadcrumb bar too small to read. Switch to docElementScreenshot targeting [data-cy-files-content-breadcrumbs] so the screenshot clearly shows the Files → Documents trail. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
NC 33 shows the ··· button permanently; hover does not reveal it. Drop the mouseover trigger and click the Actions button directly so the screenshot captures the open menu as intended. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…nshot The Versions tab was missing from the sidebar because files_versions wasn't in the SCREENSHOT_APPS list. It's a bundled app so no app-store access is needed. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…ge-8 After clicking the grid toggle, blur focus by clicking the file list so the button outline doesn't appear in the screenshot. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Upload Q2 Project Proposal.pdf twice to generate a version entry, and target that file specifically in the details sidebar test so the Versions tab is populated in files_page-4. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…actions Selects three rows and waits for the bulk action bar to appear, illustrating the delete/download actions described in the "Selecting files or folders" section. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…icon Provisions a user share on Documents and a public link on Ocean sunset.jpg in before(), then captures the file list showing both sharing indicators alongside unshared items. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…d link icon Signed-off-by: Anna Larch <anna@nextcloud.com>
…adge and link icon Signed-off-by: Anna Larch <anna@nextcloud.com>
…ile menu) AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Add uploadAvatar task to cypress.config.ts that POSTs to the NC avatar endpoint via multipart/form-data with Basic Auth + OCS-APIREQUEST to bypass CSRF. Call it from the before() hooks in files.cy.ts and webinterface.cy.ts using the portraits from ~/Downloads/tp/avatar/. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…hristine Add calendar, circles, deck, notes, photos, tasks to SCREENSHOT_APPS. Set christine's dashboard layout via occ user:setting to match the tech-preview instance (minus mail/spreed which aren't in the server image). AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Electron 118 (Chrome 118) falls below NC 33's minimum of Chrome 142+, causing redirects to /index.php/unsupported and blocking all tests except the login page. The --user-agent CLI arg is silently ignored in Electron; overriding via Network.setUserAgentOverride CDP command in the global before() hook is the only reliable fix. Also clean up debug code from the profile menu test. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Electron 118 lacks CSS sqrt() support (Chrome 120+), which breaks the
NcAvatar status indicator size calculation and renders it at the SVG's
natural 24px instead of the CSS-computed 13px.
Switch the default screenshots script to Chromium 147 (snap), add
--window-size=1440,987 to account for Chromium's browser chrome height,
and inject ::-webkit-scrollbar { display: none } via suppressFocusRings
to keep screenshots clean.
AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Anna Larch <anna@nextcloud.com>
AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
…shboard AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
Add Cypress specs for three Talk RST pages, plus the 'spreed' app to SCREENSHOT_APPS so Talk is enabled in the screenshot container. All specs provision amara_w (Amara Winterbourne) as a second user and seed a realistic 1:1 conversation from tp.db room 112. - cypress/e2e/user/talk/conversations.cy.ts — 22/25 screenshots for conversations.rst (conversation list, 1:1 with sidebar, create flow, filters, group settings, participant/ban/expiration/notification dialogs, privacy settings, archive) - cypress/e2e/user/talk/chat.cy.ts — 7/9 screenshots for chat.rst (emoji picker, smart picker, reply hover, message menu, silent mode, schedule action, scheduled messages list; AI summary skipped) - cypress/e2e/user/talk/messages.cy.ts — 13/13 screenshots for messages.rst (edit, pin, reminder, search, thread create/view/list/ notifications/followed/title-edit) AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
| "inventory": "python3 scripts/inventory.py" | ||
| }, | ||
| "devDependencies": { | ||
| "@nextcloud/cypress": "1.0.0-beta.15", |
There was a problem hiding this comment.
This package is EOL / dead.
Better use @nextcloud/e2e-test-server
| "devDependencies": { | ||
| "@nextcloud/cypress": "1.0.0-beta.15", | ||
| "@types/node": "^20.0.0", | ||
| "cypress": "^13.9.0", |
There was a problem hiding this comment.
With @nextcloud/e2e-test-server you can then also use Cypress 15+ here.
There was a problem hiding this comment.
Neat, thank you! What is more future- proof in your opinion - Cypress 15 or a rewrite to Playwright?
There was a problem hiding this comment.
For Cypress 15 all what you need to do is to switch to @nextcloud/e2e-test-server.
You would need the same for Playwright, so you can make this just a step between without additional costs.
For this purpose both will do, but for e2e tests in apps I think PW is more future proof.
☑️ Resolves
🖼️ Screenshots
✅ Checklist
codespellor similar and addressed any spelling issues